<template>
  <el-scrollbar class="scrollbar">
    <div class="con">
      <div class="list" v-for="item in userListData" :key="item.userId">
        <div class="user">
          <div class="user_heade">
            <el-avatar
              slot="reference"
              class="user-icon"
              :src="item.headUrl"
              size="medium"
              v-if="item.headUrl"></el-avatar>
            <el-avatar
              slot="reference"
              class="user-icon"
              :src="item.gender === '女' ? circleUrlW : circleUrlM"
              size="medium"
              v-else></el-avatar>
          </div>
          <div class="user_name">
            <span>{{ item.userName }}</span>
          </div>
          <div class="user_post">{{ item.orgAlias }}</div>
        </div>
        <div class="btn-con">
          <div class="item_btn success" @click="goEvaluate(item)" v-if="item.status == 2 || item.status == 3">
            已评议
          </div>
          <div class="item_btn" @click="goEvaluate(item)" v-else-if="item.status == 1">去评议</div>
          <div class="item_btn error" v-else>未提交</div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'AppraistPageTypeCon',
  components: {},
  props: {
    // 评价待办ID
    evaluateNeedId: {
      type: String,
      default: '',
    },
    userListData: {
      type: Array,
      default: () => [],
    },
    // 评价类型  待评议：0、已评议：1
    evaluateType: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goEvaluate(item) {
      const param = {
        needId: this.evaluateNeedId,
        recordType: item.recordType,
        busSign: item.busSign,
      }
      if (this.evaluateType === '1') {
        param.isEnd = true
      }
      this.$router.push({
        path: '/evaluate/edit',
        query: param,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.scrollbar {
  flex: 1;
  height: 100%;
  .con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 10px;
    font-size: 14px;
    .list {
      width: 49%;
      border: solid 1px #e5e5e5;
      background-color: #f9f9f9;
      margin-bottom: 30px;
      border-radius: 4px;
      background-color: #ffffff;
      .user {
        display: flex;
        align-items: center;
        padding: 20px 20px 10px 20px;
        .iconfont {
          font-size: 50px;
        }
        .user_name {
          color: #333333;
          font-size: 14px;
          font-weight: 600;
          span {
            padding: 0 20px;
            border-right: 1px solid #dddddd;
          }
        }
        .user_post {
          color: #666666;
          padding: 0 20px;
        }
        .user_heade {
          margin-right: 20px;
          width: 45px;
          height: 45px;
          /deep/.user-icon {
            width: 100%;
            height: 100%;
            img {
              width: 100%;
            }
          }
        }
      }
      .btn-con {
        display: flex;
        justify-content: flex-end;
        background-color: #f9f9f9;
        padding: 10px 30px;
        .item_btn {
          background-color: #1852a3;
          font-size: 14px;
          padding: 3px 18px;
          color: #ffffff;
          cursor: pointer;
          &.success {
            background-color: #488c3c;
          }
          .error {
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>
